<template>
    <mu-paper class="paperz" :zDepth="2">
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
                <el-select v-model="searchList.search" placeholder="请选择" size="mini" style="width: 90px" height="250">
                    <el-option v-for="item in searchs" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-input placeholder="请输入内容" size="mini" v-model="searchList.searchValue"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button size="mini" @click="getTaskInfoList">搜索
                </el-button>
            </el-form-item>
            <div class="block">
                {{value6}}
                <el-date-picker
                  v-model="value6"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期" size="mini">
                </el-date-picker>
            </div>
        </el-form>
        <el-table
                @filter-change="filter"
                :data="tableData"
                @selection-change="handleSelectionChange"
                style="width: 100%;">
            <el-table-column
                    type="selection"
                    width="40">
            </el-table-column>

            <el-table-column
                    prop="id"
                    label="序号"
                    width="60"
            >
            </el-table-column>
            <el-table-column
                    prop="taskId"
                    label="任务编号"
                    width="80"
            >
            </el-table-column>
            <el-table-column
                    prop="user"
                    label="用户"
                    width="60">
            </el-table-column>

            <el-table-column
                    prop="shop"
                    label="店铺"
                    width="60"
            >
            </el-table-column>
            <el-table-column
                    prop="babyId"
                    label="宝贝ID"
                    width="80"
            >
                <template slot-scope="props">
                    <a target="_blank"
                       :href="'https://detail.tmall.com/item.htm?id=' + props.row.babyId">{{props.row.babyId}}</a>
                </template>
            </el-table-column>
            <el-table-column
                    prop="taobao"
                    label="产品名称"
                    width="80"
            >
            </el-table-column>

            <el-table-column
                    prop="userGroup"
                    label="激活员"
                    width="80"
            >
            </el-table-column>
            <el-table-column
                    prop="userGroup"
                    label="客服"
                    width="80"
            >
            </el-table-column>
            <el-table-column
                    prop="order"
                    label="订单号"
                    width="80"
            >
            </el-table-column>
            <el-table-column
                    prop=""
                    label="件数"
                    width="50"
            >
            </el-table-column>
            <el-table-column
                    prop="principal"
                    label="本金"
                    width="50"
            >
            </el-table-column>
            <el-table-column
                    prop=""
                    label="佣金"
                    width="50"
            >
            </el-table-column>
            <el-table-column
                    prop=""
                    label="余额"
                    width="50"
            >
            </el-table-column>
            <el-table-column
                    prop=""
                    label="充值记录"
                    width="50"
            >
            </el-table-column>
            <el-table-column
                    prop=""
                    label="提现记录"
                    width="50"
            >
            </el-table-column>
            <el-table-column
                    prop="addTime"
                    label="开始时间"
                    width="80"
            >
                <template slot-scope="props">
                    <span>{{ props.row.addTime | timeTo(1) }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop=""
                    label="付款截图"
                    width="80"
            >

            </el-table-column>

            <el-table-column
                    prop=""
                    label="平台交易状态"
                    width="80"
            >

            </el-table-column>
            <el-table-column
                    prop="principal"
                    label="淘宝交易状态"
                    width="80"
            >

            </el-table-column>

            <!-- <el-table-column
                    fixed="right"
                    prop="status"
                    label="状态"
                    width="120"
                    :filters="[{ text: '订单号待审核', value: '1' }]"
                    filter-placement="bottom-end"
                    column-key="filterTask"
                    :filter-multiple="filterStatus.task"
            >
                <template slot-scope="scope">
                    <div v-if="scope.row.status === '0'">
                        进行中
                    </div>
                    <div v-if="scope.row.status === '1'">
                        订单号待操作员审核
                    </div>
                    <div v-if="scope.row.status === '2'">
                        收货待审核
                    </div>
                    <div v-if="scope.row.status === '3'">
                        完成
                    </div>
                    <div v-if="scope.row.status === '4'">
                        冻结
                    </div>
                    <div v-if="scope.row.status === '999'">
                        取消
                    </div>
                    <div v-if="scope.row.status === '5'">
                        <span style="color: red">取消</span>
                    </div>
                    <div v-if="scope.row.status === '1001'">
                        订单号审核通过
                    </div>
                    <div v-if="scope.row.status === '2001'">
                        订单号审核失败
                    </div>

                    <div v-if="scope.row.status === '2002'">
                        收货审核失败
                    </div>
                </template>
            </el-table-column> -->
            <el-table-column
                    prop=""
                    label="商家确认状态"
                    width="80"
            >

            </el-table-column>

        </el-table>
        <br/>
        <div v-if="multipleSelection[0]">
            <el-button size="mini" type="primary"
                       @click="setArr('delete','','删除')">删除
            </el-button>
        </div>
        <br/>
        <el-pagination
                :page-size="20"
                :current-page="searchList.pn"
                layout="prev, pager, next"
                :total="searchList.total"
                @current-change="pnChange"
                v-if="searchList.total > 20"
        >
        </el-pagination>

        <el-dialog title="" :visible.sync="goodUpdate" custom-class="backupdedleteUserDialog">
            <el-form label-width="110px">
                <el-form-item label="评价">
                    <el-input auto-complete="off" type="textarea" autosize v-model='list.text1'
                              :autosize="{ minRows: 3, maxRows: 12}"></el-input>
                </el-form-item>
                <el-form-item label="图片">
                    <el-upload
                            ref="upload1"
                            class="upload-demo"
                            action="http://39.104.83.69:2727/v1/api/other/UploadImg"
                            multiple
                            name="1"
                            :data="list"
                            :auto-upload="false"
                            :limit="6"
                            :on-success="uploadSuccess"
                    >
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </el-form-item>
                <el-form-item label="追加评论">
                    <el-input auto-complete="off" type="textarea" v-model='list.text2' autosize
                              :autosize="{ minRows: 3, maxRows: 12}"></el-input>
                </el-form-item>


                <el-form-item label="追加图片" style="">
                    <el-upload
                            ref="upload2"
                            class="upload-demo"
                            action="http://39.104.83.69:2727/v1/api/other/UploadImg"
                            name="2"
                            multiple
                            :data="list"
                            :auto-upload="false"
                            :limit="6"
                            :on-success="uploadSuccess"
                    >
                        <el-button size="small" type="primary">点击上传</el-button>

                    </el-upload>
                </el-form-item>

                <el-form-item label="追加天数" style="float: left;left: 25px">
                    <el-input auto-complete="off" v-model='list.num1'
                              style="width: 65px;float: left"></el-input>
                </el-form-item>
                <el-form-item label="追加金额">
                    <el-input-number v-model="list.num2" :min="2" :max="6"></el-input-number>
                </el-form-item>

                <el-form-item style="text-align: center;">
                    <el-button type="primary" style="width: 200px;" @click="submitUpload">上传</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </mu-paper>
</template>
<script>

    export default {
        data() {
            return {
                value6:'',
                goodUpdate: false,
                taskInfoListTemp: {},
                tableData: [{
                    // id:'1',
                    // taskId:'12',

                }],
                value: '',
                list: {
                    num2: 2,
                    num1: 0,
                    data: []
                },
                filterStatus: {
                    task: false,
                    goodcomment: false
                }
                ,
                value2: '2元',
                options2: [
                    {
                        value: 2,
                        label: '2元'
                    },
                    {
                        value: 3,
                        label: '3元'
                    },
                    {
                        value: 4,
                        label: '4元'
                    },
                    {
                        value: 5,
                        label: '5元'
                    },
                ],
                options: [
                    {
                        value: '1',
                        label: '订单待审核'
                    }, {
                        value: '2',
                        label: '收货待审核'
                    }, {
                        value: '3',
                        label: '完成'
                    }, {
                        value: '1001',
                        label: '订单手动审核通过'
                    }, {
                        value: '2001',
                        label: '订单审核失败'
                    }, {
                        value: '2002',
                        label: '收货审核失败'
                    }
                ],
                searchs: [
                    {
                        value: "user",
                        label: "用户名"
                    },
                    {
                        value: "taskId",
                        label: "任务ID"
                    },
                    {
                        value: "shop",
                        label: "店铺"
                    },
                    {
                        value: 'order',
                        label: '订单号'
                    }
                ],
                searchList: {
                    search: "user",
                    searchValue: "",
                    filter: {
                        status: "",
                        goodcomment: "",

                    },
                    pn: 1,
                    total: 0,
                },
                multipleSelection: [],
            }
        },
        methods: {
            rand(a, b) {

            },
            pnChange(pn) {
                this.searchList.pn = pn;
                this.getTaskInfoList();
            },
            filter(value) {
                console.log(value);
                value.filterUser
                    ? (this.searchList.filter.user = value.filterTask[0])
                    : (this.searchList.filter.status = value.filterTask[0]);
                this.getTaskInfoList();
            },
            setArr(a, b, c) {
                let _this = this;
                _this
                    .$confirm("确认" + c + "?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    })
                    .then(() => {
                        _this.$http
                            .post("/api/api.php", {
                                id: "setArr",
                                table: 'taskList',
                                set: a,
                                field: b,
                                arr: JSON.stringify(_this.multipleSelection),
                            })
                            .then(function (response) {
                                _this.$message({
                                    type: response.data.status,
                                    message: response.data.msg
                                });
                                _this.getTaskInfoList();
                            });
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消"
                        });
                    });
            },
            getTaskInfoList() {
                let _this = this;
                _this.$http
                    .post("/api/api.php", {
                        id: "getTaskInfoList",
                        search: JSON.stringify(_this.searchList)
                    })
                    .then(function (response) {
                        _this.tableData = response.data.data;
                        _this.searchList.total = parseInt(response.data.total);
                    });
            },
            switchTaskInfoStatus(a, b) {
                let title;
                let _this = this;
                a === 2 ? (title = "确认任务 " + b + " 状态更新为审核通过?") : 1;
                _this.$confirm(title, "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    _this.$http.post("/api/api.php", {
                        id: "updateTaskInfoStatus",
                        user: b,
                        status: a
                    }).then(function (response) {
                        _this.$message({
                            type: response.data.status,
                            message: response.data.msg
                        });
                        _this.getTaskInfoList();
                    });
                }).catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消"
                    });
                });

            },
            check(a, b) {
                let _this = this;
                _this.value = '';
                _this.$confirm("确认操作", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    _this.$http.post("/api/api.php", {
                        id: "updateTaskInfoCheck",
                        user: a,
                        status: b
                    }).then(function (response) {
                        _this.$message({
                            type: response.data.status,
                            message: response.data.msg
                        });
                        _this.getTaskInfoList();
                    });
                }).catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消"
                    });
                });
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            uploadSuccess() {
            },
            submitUpload() {
                this.$refs.upload1.submit();
                this.$refs.upload2.submit();
            },
        },
        mounted() {
            this.getTaskInfoList();
        }
    }
</script>
<style scoped>
    .paperz {
        height: 90%;
        padding: 15px;
    }

    .demo-table-expand {
        font-size: 0;
        margin-left: 50px;
    }

    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }

    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }

    .dedleteUserDialog {
        width: 980px;
    }
</style>
